<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <!-- 数据统计卡片 -->
      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="data-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span>设备总数</span>
              <el-tag type="success">实时</el-tag>
            </div>
          </template>
          <div class="data-value">
            <transition name="el-fade-in-linear">
              <div class="card-number">{{ deviceTotal }}</div>
            </transition>
            <div class="data-icon">
              <i class="el-icon-monitor"></i>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="data-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span>在线设备</span>
              <el-tag type="success">实时</el-tag>
            </div>
          </template>
          <div class="data-value">
            <transition name="el-fade-in-linear">
              <div class="card-number">{{ onlineDevices }}</div>
            </transition>
            <div class="data-icon">
              <i class="el-icon-connection"></i>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="data-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span>今日订单</span>
              <el-tag type="warning">今日</el-tag>
            </div>
          </template>
          <div class="data-value">
            <transition name="el-fade-in-linear">
              <div class="card-number">{{ todayOrders }}</div>
            </transition>
            <div class="data-icon">
              <i class="el-icon-shopping-cart-full"></i>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="data-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span>今日销售额</span>
              <el-tag type="warning">今日</el-tag>
            </div>
          </template>
          <div class="data-value">
            <transition name="el-fade-in-linear">
              <div class="card-number">¥{{ todaySales }}</div>
            </transition>
            <div class="data-icon">
              <i class="el-icon-money"></i>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 天气卡片 -->
      <el-col :span="24" style="margin-top: 20px">
        <Weather />
      </el-col>

      <!-- 地图区域 -->
      <el-col :span="24" style="margin-top: 20px">
        <Map />
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts" name="Index">
import { ref, onMounted } from 'vue';
import Weather from '@/components/Weather/index.vue';
import Map from '@/components/Map/index.vue';
import { getDeviceTotal, getDeviceOnline } from '@/api/vending/device/index';
import { getTodayOrderCount, getTodaySales } from '@/api/order/order/index';

// 数据统计
const deviceTotal = ref(0);
const onlineDevices = ref(0);
const todayOrders = ref(0);
const todaySales = ref(0);

onMounted(() => {
  // 获取设备总数
  getDeviceTotal().then(res => {
    deviceTotal.value = res.data || 0;
  });
  // 获取在线设备数
  getDeviceOnline().then(res => {
    onlineDevices.value = res.data || 0;
  });
  // 获取今日订单数
  getTodayOrderCount().then(res => {
    todayOrders.value = res.data || 0;
  });
  // 获取今日销售额
  getTodaySales().then(res => {
    todaySales.value = res.data || 0;
  });
});
</script>

<style scoped lang="scss">
.home {
  .data-card {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .data-value {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 0;

      .card-number {
        font-size: 36px;
        font-weight: bold;
        color: #303133;
      }

      .data-icon {
        font-size: 48px;
        color: #409eff;
        opacity: 0.8;
      }
    }
  }
}
</style>
